<script>
import siteOptions from "./siteOptions";
export default {
  name: "DragSite",
  mixins: [siteOptions],
  inject: ["view"],
  props: {
    params: Object,
  },
  data() {
    return {
      dragObj: {},
      zIndex: 0,
      draggable: true,
    };
  },
  render() {
    const { params, config, options, slot, componentName, commonOptions } =
      this;
    const Tag = config.tag;
    let slotConent = "";
    let slotTag = (slot && slot.tag) || "";
    let { left, top, width, height } = commonOptions;
    switch (componentName) {
      case "inputTextarea":
        options.autosize = options.autosizeAuto || options.autosize;
        break;
      case "inputComponent":
        slotConent = (
          <span>
            <template slot="prepend">{slot.prepend}</template>
            <template slot="append">{slot.append}</template>
          </span>
        ).children;
        break;
    }
    if (componentName !== "cardComponent") {
      slotConent = slotTag
        ? slot.options.map((item) => {
            return (
              <slotTag {...{ attrs: item }}>
                {slotTag === "el-option" ? item.label : item.value}
              </slotTag>
            );
          })
        : slotConent;
    }
    if (Tag === "echarts-component") {
      options.componentName = componentName;
      options.echartsOptions = this.echartsOptions;
    }
    const style = this.getFreeStyle(commonOptions);
    const TagItem = (
      <Tag
        {...{
          attrs: {
            ...options,
            style: "",
          },
        }}
        v-model={this.vModel}
      >
        {componentName === "buttonComponent" ? options.text : ""}
        {slotConent}
      </Tag>
    );
    // grid={[10, 10]}
    return (
      <vdr
        x={left}
        y={top}
        w={width}
        h={height}
        minw={100}
        minh={100}
        z={commonOptions["z-index"]}
        draggable={this.draggable}
        parent
        snap
        {...{
          nativeOn: {
            click: () => {
              this.$emit("changeComponent", params);
            },
            contextmenu: ($event) => {
              this.$emit("openMenu", $event, params), $event.preventDefault();
            },
            // keyup: (e) => {
            //   if (e.key === "Shift") {
            //     this.draggable = true;
            //   }
            // },
            // keydown: (e) => {
            //   switch (e.key) {
            //     case "ArrowRight":
            //       this.commonOptions.left++;
            //       break;
            //     case "ArrowLeft":
            //       this.commonOptions.left--;
            //       break;
            //     case "ArrowUp":
            //       this.commonOptions.top--;
            //       break;
            //     case "ArrowDown":
            //       this.commonOptions.top++;
            //       break;
            //     // case "Shift":
            //     //   this.draggable = false;
            //     //   break;
            //   }
            // },
          },
          on: {
            resizing: () => {
              this.view.isMove = true;
            },
            dragging: () => {
              this.view.isMove = true;
            },
            refLineParams: (e) => {
              this.$emit("getRefLineParams", e);
            },
            resizestop: (x, y, width, height) => {
              this.params["__commonOptions__"].left = x;
              this.params["__commonOptions__"].top = y;
              this.params["__commonOptions__"].width = width;
              this.params["__commonOptions__"].height = height;
              this.view.isMove = false;
            },
            dragstop: (x, y) => {
              this.dragObj.left = x + "rem";
              this.dragObj.top = y + "rem";
              this.params["__commonOptions__"].left = x;
              this.params["__commonOptions__"].top = y;
              this.view.isMove = false;
            },
          },
        }}
      >
        {
          <div
            style={{
              ...style,
              width: "100%",
              height: "100%",
            }}
          >
            <div class="cover"></div>
            {TagItem}
          </div>
        }
      </vdr>
    );
  },
};
</script>

<style lang="scss" scoped>
.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style>